<!DOCTYPE html>
<html>
<head>
  <title>Memlib</title>
  <script src="../../script/jq.js"></script>
  <script src="../../script/login_check.js"></script>
  <script src="../../script/scale-suit.js"></script>
  <script src="../../script/MemTool.js"></script>
  <script>
    function addCol(k,v) {
      var originCol = $('#add-word-card-zero');
      var newCol = originCol.clone(true,true);
      newCol.removeAttr("id");
      newCol.css("display","inline-block");
      let e1 = newCol.children().eq(0);
      e1.val(k);
      let e2 = newCol.children().eq(1);
      e2.val(v[0]);
      let e3 = newCol.children().eq(3);
      let R = calcIntMemKeepIndexByWordContent(v);
      e3.css("width",647*R/100);
      /*    e3.css("background-color", "#d151fc"); */
      if (R > 60) {
        e3.css("background-color", "#5ffaff");//下次复习开放时间:
      } else if (R > ForgetLine) {
        e3.css("background-color", "#ffa42d");
      } else {
        e3.css("background-color", "#ff6666");
      }
      let e4 = newCol.children().eq(4);
      let forgetTime = getForgetTime(v);
      let day = Math.trunc(forgetTime / 24);
      let hour = Math.trunc((forgetTime % 24)*10)/10;
      if (forgetTime == 0) {
        e4.text("现在就可以复习辣！看看你还记着不？");
      } else {
        e4.text("下次复习开放时间: " + hour2Date(forgetTime) + "(" + day + "天" + hour + "小时后)");
      }
      newCol.insertBefore('#turn-page-container');
    }
    var pages = Array();
    var public_delete = Array();
    var lists;
    var now_page = 0;
    var sorted_pages = Array();
    var sorted_activated = 0;
    function showPage() {
      if (sorted_activated) {
        showSortedPage();
      } else {
        showUnsortedPage();
      }
    }
    function showUnsortedPage() {
      $(".add-word-card:not(#add-word-card-zero)").remove();
      for (let col of pages[now_page]) {
        //console.log(col);
        addCol(col[0],col[1]);
      }
    }
    function showSortedPage() {
      $(".add-word-card:not(#add-word-card-zero)").remove();
      for (let col of sorted_pages[now_page]) {
        addCol(col[0],col[1]);
      }
    }
    $(function() {
      var deleteCount = 0;
      $.get('ManageWordLib.php',function(data){
        lists = JSON.parse(data);
        let tempAllWordList = Array();
        //console.log(lists);
        let word_count = 0;
        let page = -1;
        for (let j = lists.length-1;j>=0;j--) {
          let list = JSON.parse(lists[j]); // bug: parse时会将顺序打乱，具体为key含有数字的会放到最前面
          let words = Object.keys(list);
          let contents = Object.values(list);
          for (let i = words.length-1; i>=0; i--) {
            tempAllWordList.push(Array(words[i],contents[i]));
            if(word_count % 10 === 0) {
              page ++;
              pages[page] = new Map();
            }
            word_count++;
            pages[page].set(words[i],contents[i]);
            //console.log(words[i]);
          }
        }
        if (word_count == 0) {
          $("#notice").text("词库为空，速回主页学习新词！");
        } else {
          let sortedIndex = Array();
          for (let i = 0; i < tempAllWordList.length; i++) {
            sortedIndex[i] = i;
          }
          let point = 1;
          for (; point < sortedIndex.length; point++) {
            for (let i = point; i > 0; i--) {
              if (getForgetTime(tempAllWordList[sortedIndex[i]][1])
                      <
                  getForgetTime(tempAllWordList[sortedIndex[i-1]][1])) {
                let temp_i = sortedIndex[i];
                sortedIndex[i] = sortedIndex[i-1];
                sortedIndex[i-1] = temp_i;
              }
            }
          }
          let page = -1;
          for (let i = 0; i < sortedIndex.length; i++) {
            if (i % 10 === 0) {
              page ++;
              sorted_pages[page] = new Map();
            }
            console.log(tempAllWordList[sortedIndex[i]][0]);
            sorted_pages[page].set(tempAllWordList[sortedIndex[i]][0],tempAllWordList[sortedIndex[i]][1]);
          }
          //showSortedPage();
          showPage();
        }
      });
      $("#Upper-Checkbox").click(function () {
        sorted_activated ^= 1;
        showPage();
      });
      $(".add-word-card-delete").click(function(){
        let k =  $(this).parent().children().eq(0).val();
        for (let j = lists.length-1;j>=0;j--) {
          let o = JSON.parse(lists[j]);
          console.log(o);
          if(k in o) {
            if (o[k][2] > 0) {
              public_delete.push(o[k][2]);
            }
            delete o[k];
          }

          lists[j] = JSON.stringify(o);
        }
        $(this).parent().remove();
        deleteCount++;
      });
      var changing_key = null;
      $(".add-word-key-input").focus(function(){
        changing_key = $(this).val();
      }).blur(function(){
        let k = $(this).val();
        if(changing_key !== null && k != changing_key) {
          for (let j = lists.length-1;j>=0;j--) {
            let o = JSON.parse(lists[j]);
            if(changing_key in o) {
              let v = o[changing_key];
              o[k] = v;
              delete o[changing_key];
            }
            lists[j] = JSON.stringify(o);
          }
        }
        changing_key = null;
        //console.log(lists);
      });
      $(".add-word-value-input").blur(function (){
        $(this).removeAttr("placeholder");
        let k = $(this).prev().val();
        let new_v_0 = $(this).val();
        for (let j = lists.length-1;j>=0;j--) {
          let o = JSON.parse(lists[j]);
          if(k in o) {
            o[k][0] = new_v_0;
          }
          lists[j] = JSON.stringify(o);
        }
      });
      $("#manage-change-submit").click(function(){
       let obj_lists = Array();
       for (let  i = 0;i < lists.length; i++) {
         obj_lists[i] = JSON.parse(lists[i]);
       } //解决反斜杠问题
        $.post("ManageWordLib.php",{
          data:JSON.stringify(obj_lists),
          deleteCount:deleteCount,
          public_delete:JSON.stringify(public_delete)
        },function(data){
          if(data == "0") {
            deleteCount = 0;
            $("#notice").text("单词表已修改成功！");
            setTimeout(function (){
              $("#notice").html('这是'+username+'的小词库');
            },2000);
          }else{
            $("#notice").text("发生了奇怪的错误");
            $("#notice").text(data);
          }
        });
      });
      $("#turn-last-page").click(function(){
        if(now_page>0) {
          now_page--;
          showPage();
        }
      });
      $("#turn-next-page").click(function(){
        if(now_page<pages.length-1) {
          now_page++;
          showPage();
        }
      });
    });
  </script>
  <link rel="stylesheet" type="text/css" href="../../style/style.css">
  <link rel="stylesheet" type="text/css" href="../../style/animation.css">
  <link rel="stylesheet" type="text/css" href="../../style/CreatePrivateList.css">
  <style>
    #manage-change-submit{
      background-color: #ffaaff;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }
    #turn-page-container{
      display: inline-block;
      width: 650px;
      height: 100px;
    }
    #turn-last-page, #turn-next-page{
      display: inline-block;
      width: 325px;
      height: 100px;
      font-size: 50px;
      line-height: 100px;
      color: #555555;
    }
    #turn-last-page{
      border-top-left-radius: 30px;
      background-color: #aaffaa;
    }
    #turn-next-page{
      border-top-right-radius: 30px;
      background-color: #aaffff;
    }
    .add-word-card{
      height: 140px!important;
    }
    #word-status-shower{
      height: 20px;
      width: 647px;
      margin-left: 37px;
      background-color: #5ffaff;

      border-radius: 10px;
    }
    #forget-time-ps{
      margin-left: 80px;
      font-size: 24px;
      color: #666666;
    }
    .Upper-Container{
      margin-top: 30px;
      margin-bottom: 5px;
      display: inline-block;
      height: 30px;
      width: 800px;
    }
    #Upper-Checkbox{
      appearance: none;
      height: 30px;
      width: 30px;
      margin: 0 10px 5px 5px;
      border: 3px solid #a6a6a6;
      border-radius: 30px;
    }
    #Upper-Checkbox:checked{
      appearance: none;
      height: 30px;
      width: 30px;
      margin: 0 10px 5px 5px;
      border: 3px solid #a6a6a6;
      border-radius: 30px;
      background-color: #666666;
    }
  </style>
  <meta charset="utf-8">
<body>
<div id="main">
  <div id="notice">这是<p id="user-name">你</p>的小词库</div>
  <div class="Upper-Container">
    <input style="float: right;" type="checkbox" id="Upper-Checkbox" />
    <span style="float: right;height: 30px;font-size: 25px;line-height: 30px;color: #a6a6a6;">按下次复习时间排序</span>
  </div>
  <div id="add-word-card-zero" class="add-word-card simple-slide-left">
    <input class="add-word-key-input" type="text" name="key" placeholder="提示词(中文释义)" required>
    <input class="add-word-value-input" type="text" name="value" placeholder="答案词(英文)" required>
    <div class="add-word-card-delete circle"></div>
    <div id="word-status-shower"></div>
    <p id="forget-time-ps">下次复习开放时间: 2023-10-13 23:56 (1天23小时后)</p>
  </div>
  <div id="turn-page-container">
    <div id="turn-last-page" class="hover-shadow">上一页</div>
    <div id="turn-next-page" class="hover-shadow">下一页</div>
  </div>
  <div id="manage-change-submit" class="cardbase button">点我使修改生效</div>
</div>
</body>
</html>
